<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        body,
        ul,
        ol,
        li,
        img {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            width: 490px;
            height: 170px;
            padding: 5px;
            position: relative;
            border: 1px solid #ccc;
            margin: 100px auto 0;
            overflow: hidden;
        }

        .ad {
            width: 490px;
            height: 170px;
            overflow: hidden;
            position: relative;
        }

        #box img {
            width: 490px;
        }

        .ad ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }

        .ad ol li {
            width: 20px;
            height: 20px;
            line-height: 20px;
            border: 1px solid #ccc;
            text-align: center;
            background: #fff;
            float: left;
            margin-right: 10px;
            cursor: pointer;
            _display: inline;
        }

        .ad ol li.current {
            background: yellow;
        }

        .ad ul li {
            float: left;
        }

        .ad ul {
            position: absolute;
            top: 0;
            width: 2940px;
        }

        .ad ul li.current {
            display: block;
        }

        #arr {
            display: none;
        }

        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }

        div {
            background-color: red;
            filter: alpha(opacity=50);
        }
    </style>
    <!-- <script src="../js/scroll.js"></script> -->
    <script src="../../d27/js/jquery.js"></script>
</head>
<body>
    <div id="box" class="all">
        <div class="ad">
            <ul id="imgs">
                <li><img src="images/1.jpg" /></li>
                <li><img src="images/2.jpg" /></li>
                <li><img src="images/3.jpg" /></li>
                <li><img src="images/4.jpg" /></li>
                <li><img src="images/5.jpg" /></li>
            </ul>
        </div>
        <div id="arr">
            <span id="left"> &lt; </span>
            <span id="right"> &gt;</span>
        </div>
    </div>
    <script>
        $(function(){
            $(".all").mouseenter(function(){
                var self=this;
                var $index=0;
                $(this).children("#arr").show(function(){
                    $(this).children("#left").click(function(){
                        $index++;
                        if($index>4){
                            $index=4;
                        }
                        $(self).find(".ad>#imgs").animate({left:-490*$index},300)
                    })
                    $(this).children("#right").click(function(){
                        $index--;
                        if($index<0){
                            $index=0;
                        }
                        $(self).find(".ad>#imgs").animate({left:-490*$index},300)
                    })
                })
            })
            $(".all").mouseleave(function(){
                $(this).children("#arr").hide()
            })
        })
        // class sWiper{
        //     // 取出属性
        //     constructor(ele){
        //         this.el=document.querySelector(ele);
        //         this.oUl=this.el.children[0].children[0];
        //         this.oArr=this.el.children[1];

        //         this.tempIndex=0;
        //         this.mouseHandler();
        //     }
        //     // 行为
        //     mouseHandler(){
        //         this.el.onmouseenter=()=>{
        //             this.oArr.style.display="block";
        //         }
        //         this.el.onmouseleave=()=>{
        //             this.oArr.style.display="none";
        //         }
        //         var self=this;
        //         this.oArr.children[0].onclick=()=>{
        //             self.tempIndex--;
        //             if(self.tempIndex<0){
        //                 self.tempIndex=0;
        //             }
        //             utils.animate(self.oUl,{left:self.tempIndex*-490});
        //         }
        //         this.oArr.children[1].onclick=()=>{
        //             self.tempIndex++;
        //             if(self.tempIndex>4){
        //                 self.tempIndex=4;
        //             }
        //             utils.animate(self.oUl,{left:self.tempIndex*-490});
        //         }
        //     }
        // }
        // new sWiper("#box");

        // function Swiper(ele){
        //     this.el=document.querySelector(ele);
        //     this.oUl=this.el.children[0].children[0];
        //     this.oArr=this.el.children[1];
        //     this.tempIndex=0;

        //     this.mouseHandler=function(){
        //         this.el.onmouseenter=()=>{
        //             this.oArr.style.display="block";
        //         }
        //         this.el.onmouseleave=()=>{
        //             this.oArr.style.display="none";
        //         }
        //         var self=this;
        //         this.oArr.children[0].onclick=()=>{
        //             self.tempIndex--;
        //             if(self.tempIndex<0){
        //                 self.tempIndex=0;
        //             }
        //             utils.animate(self.oUl,{left:self.tempIndex*-490});
        //         }
        //         this.oArr.children[1].onclick=()=>{
        //             self.tempIndex++;
        //             if(self.tempIndex>4){
        //                 self.tempIndex=4;
        //             }
        //             utils.animate(self.oUl,{left:self.tempIndex*-490});
        //         }
        //     }
        // }
        // new Swiper("#box").mouseHandler();
    </script>
</body>
</html>